<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-carousel__arrow{
            z-index: unset;
        }
        .box{
            width: 1180px;
            height: 750px;
            background: #fff;
            margin: 50px auto;
            display: flex;
            box-shadow: 4px 6px 12px 8px rgb(0 0 0 / 10%);
            border-radius: 10px;
        }
        .box-left{
            width: 50%;
        }
        .box-right{
            position: relative;
            width: 350px;
            margin: 150px auto 0;
            height: 450px;
            background: #fff;
        }
        .box-right-H {
            display: flex;
            height: 45px;
            justify-content: space-between;
            width: 100%;
        }
        .title{
            font-size: 30px;
            font-weight: 500;
        }
        .box-right-H p {
            line-height: 45px;
            font-size: 16px;
        }
        .box-right-H a{
            color: red;
            text-decoration: none;
        }
        .box-right-input{
            margin-top: 25px;
        }
        .box-right-input input{
            width: 346px;
            height: 30px;
            margin-bottom: 20px;
        }
        .box-right-bottom{
            margin-top: 25px;
        }
        .box-right-bottom input{
            width: 350px;
            margin: 20px auto 0;
            height: 50px;
            background: #eee;
            border-radius: 5px;
            color: #999;
            font-size: 16px;
            border: none;
            outline: none;
            display: block;
        }
    </style>
</head>
<body>
<div>
    <div class="box">
        <div class="box-left">
            <div id="app">
                <div class="block" style="width: 590px;">
                    <el-carousel height="750px">
                        <el-carousel-item v-for="item in arr" :key="item">
                            <img :src="item" style="width: 100%;border-radius: 10px 0px 0px 10px"height="100%">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="box-right">
            <div class="box-right-H">
                <div class="title">快速登录</div>
                <p> 没有账号？<a href="/reg">去注册</a></p>
            </div>
            <div class="box-right-input">
                <input type="text" placeholder="用户名" v-model="user.username"><br>
                <input type="password" placeholder="密码" v-model="user.password">
            </div>
            <div class="box-right-bottom">
                <input type="button" @click="login()" value="登录">
            </div>
        </div>
    </div>
</div>

</body>

<script src="js/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: "",
                    password: ""
                },
                arr: ["https://account.niu.com/v3/static/img/img3.a0dad40e.jpg",
                    "https://account.niu.com/v3/static/img/img2.0c9bc9ff.jpg",
                    "https://account.niu.com/v3/static/img/img1.57da9aef.jpg"],
            }
        },
        methods:{
            login() {
                axios.post("/login",v.user).then(function (response) {
                    if (response.data==1){
                        location.href="/";//跳转到首页
                    }else if (response.data==2){
                        v.$message.error("用户名不存在");
                    }else{
                        v.$message.error("密码错误");
                    }
                })
            }
        }
    })
</script>
</html>